<template>
    <div  class="p16 flex-column-null-between container">
        <div style="height: 50px">
            <div class="search-item">
                <el-input
                        size="small"
                        v-model="queryParams.systemName"
                        class="input-width clear-input"
                        suffix-icon="el-icon-search"
                        clearable
                        placeholder="请输入系统名称"
                ></el-input>
            </div>
            <div class="search-item">
                <el-button type="primary" size="small"  @click="querySystemList">搜索</el-button>
                <el-button type="primary" size="small"  @click="addSystemVo">添加</el-button>
            </div>
        </div>

        <div  style="height: calc(100vh - 180px)">
            <el-table
                    :data="tableData"
                    size="small"
                    border
                    :row-style="{height:'0'}"
                    height="calc(100vh - 220px)"
                    v-loading="loading">
                <el-table-column
                        v-for="(item,index) in fields"
                        :key="index"
                        :label="item.label"
                        :prop="item.prop"
                        :min-width="item.width"
                        :fixed="item.fixed"
                >
               
                    <template v-if="item.prop == 'operation'" scope="scope">
                        <el-button @click="editSystemVo(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="removeSystem(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                
            </el-table>
            <div class="page-container">
                <el-pagination
                        :page-sizes="[10, 20, 30, 50]"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="nowPage"
                        :page-size="10"
                        layout="sizes,total, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
      

        <!-- 编辑系统 -->
        <editSystem ref="editSystem" @success="querySystemList('init')"/>
        <!-- 添加系统 -->
        <addSystem ref="addSystem" @success="querySystemList('init')"/>
    </div>
</template>

<script>
    import addSystem  from "./components/AddSystem";
    import editSystem  from "./components/EditSystem";
    import {querySystem,removeSystem} from '@/api/resource';
    export default {
        components:{
            addSystem,
            editSystem
        },
        data() {
            return {
                total: 0,
                loading: false,
                nowPage:1,
                queryParams:{
                    pageNum:1,
                    pageSize:10,
                    systemName:""
                },
                fields:[
                    {
                        label:"系统标识",
                        prop:"systemCode",
                        width:150
                    },{
                        label:"系统名称",
                        prop:"systemName",
                        width:150
                    },{
                        label:"图标",
                        prop:"icon",
                        width:120
                    },{
                        label:"系统地址",
                        prop:"url",
                        width:150
                    },{
                        label:"流程地址前缀",
                        prop:"flowUrl",
                        width:150
                    },{
                        label:"备注",
                        prop:"remark",
                        width:200
                    },{
                        label:"操作",
                        prop:"operation",
                        width:100,
                        fixed: "right",
                    }
                ],
                tableData: []
            }
        },
        created() {
            this.querySystemList();
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            async querySystemList(){
                this.loading = true;
                let ret = await querySystem(this.queryParams);
                let content = ret.data;
                this.total = content.total;
                this.tableData = content.list;
                this.loading = false;
            },
            handleSizeChange(val) {
                this.queryParams.limit = val;
                this.querySystemList();
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum = val;
                this.querySystemList();
            },
            //添加用户
            addSystemVo(){
                this.$refs["addSystem"].showDialog();
            },
            //编辑用户
            editSystemVo(system){
                this.$refs["editSystem"].showDialog(system);
            },
            removeSystem(system){
                 this.$confirm('您是否要删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await removeSystem({id:system.id});
                    this.querySysUserList();
                }).catch(() => {
                });
            }
            
        },

    }
</script>


<style src="../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
    .search-item{
        float: left;
        margin: 0 20px 20px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }

</style>
